<template>
  <ly-dialog
    v-model="visible"
    title="代码日志"
    width="70%"
    :show-confirm-cancel-button="false"
    :before-close="handleCancel"
    @open="handleOpen"
  >
    <div class="munu_box">
      <el-card
        class="carton_card scrollable-card"
        style="width:35%"
        shadow="never"
      >
        <el-row>
          <el-col
            :span="24"
            style="height: 400px;"
          >
            <div
              v-for="(item,index) in leftList"
              :key="index"
              class="code-item scrollable-content"
            >
              <img class="imgs" :src="item.url" alt="">
              <el-link
                :underline="false"
                @click="viewCode(item.date)"
              >
                <span>{{ item.message }}</span>
              </el-link>
              <span>{{ item.date }}</span>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <el-card
        class="reportForm_card"
        style="width:65%;"
        shadow="never"
      >
        <el-row>
          <el-col
            :span="24"
            style="height: 400px;"
          >
            <div
              v-for="(item,index) in rightList"
              :key="index"
              style="margin-top:10px"
            >
              <div>{{ item.message }}</div>
            </div>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </ly-dialog>
</template>

<script>
import { singleDuplication } from '@/utils/index'

export default {
  name: 'LogDialog',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: undefined
    },
    dataTime: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      leftList: [],
      rightList: []
    }
  },
  methods: {
    handleOpen() {
      this.leftList = singleDuplication(this.data, 'date')
      if (this.dataTime) {
        this.rightList = this.data.filter(item => { return item.date === this.dataTime })
      } else {
        this.rightList = this.data.filter(item => { return item.date === this.leftList[0].date })
      }
    },
    viewCode(val) {
      this.rightList = this.data.filter(item => { return item.date === val })
    },
    handleCancel() {
      this.setVisible(false)
    },
    setVisible(flag) {
      this.$emit('update:visible', flag)
    }
  }
}
</script>

<style lang="scss" scoped>
.scrollable-card {
  overflow: auto;
  margin: 0 auto;
}

.scrollable-content {
  height: auto;
  overflow-y: auto;
}
  .munu_box {
    display: flex;
    font-size: 16px;
  }
  .code-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .imgs{
    width: 35px;
    height: 35px;
    margin-left: 15px;
    border-radius: 50%;
  }
</style>
